<!--
 * @Description: 
 * @Author: gphper
 * @Date: 2021-09-26 19:47:26
-->
{{define "head"}}
<link href="/statics/css/jquery.json-viewer.css" type="text/css" rel="stylesheet" />
<style>
   .table {table-layout:fixed;}
</style>
{{end}}


{{define "body"}}
<div class="container" style="margin-top: 10px;">
<div class="row">
    <div class="col-sm-8">
        <div role="toolbar" aria-label="Toolbar with button groups">
            <div class="input-group">
                  <div class="input-group-prepend">
                    <div class="input-group-text" id="btnGroupAddon">LIST:</div>
                  </div>
                  <input type="text" name="key" class="form-control" value="{{.key}}" disabled>
            </div>
        </div>
    </div>

    <div class="col-sm-4" data-toggle="modal" data-target="#exampleModal">
        <div role="toolbar" aria-label="Toolbar with button groups">
            <div class="input-group">
                  <div class="input-group-prepend">
                    <div class="input-group-text" id="btnGroupAddon">TTL:</div>
                  </div>
                  <input type="text" name="key" class="form-control" value="{{.time}}" disabled>
            </div>
        </div>
    </div>


    <div class="col-sm-12" style="margin-top: 10px;">
      <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#addListModal">
        新增元素
      </button>
    </div>
    <div class="col-sm-12" id="show_sec">
      <table class="table" style="word-break:break-all; word-wrap:break-all;">
        <thead class="thead-light">
          <tr>
            <th scope="col" style="width: 10%;">序号</th>
            <th scope="col" style="width: 75%;">值</th>
            <th scope="col" style="width: 20%;">操作</th>
          </tr>
        </thead>
        <tbody>
          {{range $i,$v := .value}}
          <tr>
            <td>{{$i}}</td>
            <td>{{$v}}</td>
            <td>
              
              <form action="/list/del" method="post" class="ajaxForm" autocomplete="off">
                <input type="hidden" name="key" value="{{$.key}}">
                <input type="hidden" name="index" value="{{$i}}">
                <button type="button" class="seeBtn btn btn-sm btn-primary">JSON格式</button>
                <button type="submit" class="btn btn-sm btn-danger">删除</button>
              </form>
              
            </td>
          </tr>
          {{end}}
          
        </tbody>
      </table>
    </div>
</div>
</div>


<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">设置键的TTL</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <form action="/string/ttl" method="post" class="ajaxForm" autocomplete="off">
        <div class="modal-body">
            <div class="form-group">
              <label>新的TTL(-1 表示永不过期)</label>
              <input type="text" name="ttl" class="form-control" required>
              <input type="hidden" name="key" value="{{.key}}">
            </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
          <button type="submit" class="btn btn-primary">保存</button>
        </div>
      </form>
      </div>
    </div>
  </div>



<!-- Modal -->
<div class="modal fade" id="addListModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">添加元素</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <form action="/list/add" method="post" class="ajaxForm" autocomplete="off">
      <div class="modal-body">
          <div class="form-group">
            <label>元素值</label>
            <input type="hidden" name="key" value="{{.key}}">
            <input type="text" name="value" class="form-control" required>
          </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
        <button type="submit" class="btn btn-primary">保存</button>
      </div>
    </form>
    </div>
  </div>
</div>


<div class="modal fade" id="showJson" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">显示json</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <form action="" method="post" class="ajaxForm" autocomplete="off">
      <div class="modal-body">
        <pre id="json-renderer"></pre>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
        <!-- <button type="submit" class="btn btn-primary">保存</button> -->
      </div>
    </form>
    </div>
  </div>
</div>
{{end}}


{{define "script"}}
<script src="/statics/js/jquery.json-viewer.js"></script>
<script type="text/javascript">
$(".seeBtn").click(function(){
 
  var options = {
		  collapsed: false,
		  withQuotes: false
	};

  try{
    var input = eval('(' + $(this).parent().parent().parent().children("td")[1].textContent + ')');
	  $("#json-renderer").jsonViewer(input, options);
  }catch(err){
    layer.msg('json格式错误', {icon: 2, shade: 0.3, time: 2000});
    return false;
  }
  $("#showJson").modal("show");
})

$("#show_sec").attr('style','height:'+($(window).height() - $("#show_sec").offset().top - 60)+'px;margin-top: 15px;overflow-y: auto;');

</script>
{{end}}